import { SvgIcon } from "@/components/SvgIcon";
import { Radio } from "antd";

type RawOption ={
  label: string;
  value: string;
  title: string;
  icon: string;
}
const transRawToOptions = (arr: Array<RawOption>, pil: number = 12) => {
  return arr.map(item => {
    return (
      <Radio.Button key={item.value} value={item.value} title={item.title} style={{ paddingInline: `${pil}px` }}>
        <SvgIcon type={item.icon}></SvgIcon>
      </Radio.Button>
    );
  });
};
const displayRawOption = [
  { label: "弹性", value: "flex", title: "弹性", icon: "icon-a-Displayflex" },
  { label: "块级", value: "block", title: "块级", icon: "icon-a-Displayblock" },
  { label: "行内块级", value: "inline-block", title: "行内块级", icon: "icon-a-Displayinline-block" },
  { label: "行内", value: "inline", title: "行内", icon: "icon-a-Displayinline" },
];
export const displayOptions = transRawToOptions(displayRawOption)

const flexDirectionRawOption = [
  { label: "水平", value: "row", title: "水平", icon: "icon-flex-direction-row" },
  { label: "垂直", value: "column", title: "垂直", icon: "icon-flex-direction-col" },
  { label: "水平反向", value: "row-reverse", title: "水平反向", icon: "icon-flex-direction-row-reverse" },
  { label: "垂直反向", value: "column-reverse", title: "垂直反向", icon: "icon-flex-direction-col-reverse" },
];
export const flexDirectionOptions = transRawToOptions(flexDirectionRawOption)

const flexRowRawOption = [
  { label: "右对齐", value: "flex-start", title: "右对齐", icon: "icon-flex-justify-flex-start" },
  { label: "水平居中", value: "center", title: "水平居中", icon: "icon-flex-justify-center" },
  { label: "左对齐", value: "flex-end", title: "左对齐", icon: "icon-flex-justify-flex-end" },
  { label: "两端对齐", value: "space-between", title: "两端对齐", icon: "icon-flex-justify-space-between" },
  { label: "间隔分布", value: "space-around", title: "间隔分布", icon: "icon-flex-justify-space-around" },
];
export const flexRowOptions = transRawToOptions(flexRowRawOption, 8)

const flexColRawOption = [
  { label: "顶部对齐", value: "flex-start", title: "顶部对齐", icon: "icon-flex-align-flex-start" },
  { label: "垂直居中", value: "center", title: "垂直居中", icon: "icon-flex-align-center" },
  { label: "底部对齐", value: "flex-end", title: "底部对齐", icon: "icon-flex-align-flex-end" },
  { label: "基线对齐", value: "baseline", title: "基线对齐", icon: "icon-flex-align-baseline" },
  { label: "高度撑满", value: "stretch", title: "高度撑满", icon: "icon-flex-align-stretch" },
];
export const flexColOptions = transRawToOptions(flexColRawOption, 8)

export const flexWrapOptions = [
  { label: "不换行", value: "nowrap" },
  { label: "换行", value: "wrap" },
  { label: "反向换行", value: "wrap-reverse" },
]